<template>
	<view class="goods">
		<!-- 导航栏 -->
		<nav-bars title="商品详情"></nav-bars>
		<!-- 商品轮播图 -->
		<view class="g_banner">
			<swiper @change="changeBanner">
				<swiper-item v-for="(item, index) in goodsInfo.roundImgs" :key="index"><image :src="item.image_path"></image></swiper-item>
			</swiper>

			<view class="SwiperDots">{{ goodsInfo.roundImgs.length == 0 ? bannerIndex : bannerIndex + 1 }}/{{ goodsInfo.roundImgs.length }}</view>
		</view>

		<!-- 商品基础信息 -->
		<!-- 	<view class="g_base">
			<view>
				<view class="g_bSell">{{goodsInfo.volume}}人付款</view>
				<view class="g_bPrice">
					<view class="ledtprei">￥<text>{{goodsInfo.productPrice}}</text></view>
					<view class="ledtprei">￥<text>{{goodsInfo.productPrice}}</text></view>
					<view class="yprice" v-if="goodsInfo.rate_price"><i>底价</i>￥<text>{{goodsInfo.rate_price}}</text>
					</view>
				</view>
			</view>
			<view>
				<view class="g_bShare" @click="is_show_model=true">
					<view class="g_bsIcon">
						<view class="iconfont icon-zhuanfa2"></view>
					</view>
					<view class="g_bsTxt">分享</view>
				</view>
				<view class="g_bName omit-2">{{goodsInfo.name}}</view>
			</view>
		</view> -->
		<view class="GoodsMessage">
			<view class="GoodsFX">创客分销改价</view>
			<view class="Priceview">
				<view class="GoodsPrice">
					<view class="GoodsPriceText">分销底价</view>
					<view>
						￥
						<text class="GoodsPriceMun">{{ goodsInfo.rate_price }}</text>
					</view>
				</view>
				<view class="SalePrice" v-if="goodsInfo.isModifyPrice">
					<viwe class="SaleText">我的分销价</viwe>
					<view class="SaleMun">
						￥
						<text class="SaleMunText">{{ goodsInfo.price }}</text>
					</view>
				</view>
			</view>

			<view @click="ShareUserApp" class="ShareView"><u-icon label="分享" name="share" color="#666666" label-size="24" size="24"></u-icon></view>
			<!-- <view class="GoodsShopPrice" v-if="!goodsInfo.isModifyPrice" style="margin-bottom: 5rpx;font-weight: 600;">商城售价￥ {{ goodsInfo.price }}</view> -->
			<view class="GoodsShopPrice">
				市场价￥ {{ goodsInfo.primary_price }}
				<text v-if="!goodsInfo.isModifyPrice" style="margin-left: 30rpx;font-weight: 600;">商城售价￥ {{ goodsInfo.price }}</text>
			</view>
			<view class="GoodsTitle omit-2">{{ goodsInfo.name }}</view>
			<!-- v-if="goodsInfo.isMoreSize" -->
			<view class="g_it">
				<view class="g_iGroup">
					<view class="g_iItem">
						<view class="g_iLabel">选择</view>
						<view class="g_iCont" @tap="showSizePop">
							<view class="g_iIcon"><image src="/static/common/icon_more.png"></image></view>
							<view class="g_iTxt">规格分类</view>
							<view class="g_iSelect" v-if="goodsInfo && goodsInfo.sku_lst">
								<view style="display: flex; overflow-x: auto; width: 50%;">
									<view style="display: flex;">
										<view
											class="g_isItem"
											v-for="(itme, index) in goodsInfo.sku_lst"
											:key="index"
											:class="JSON.stringify(itme.attribute) == JSON.stringify(this.keys) ? 'active' : ''"
										>
											<image :src="goodsInfo.main_imgurl"></image>
										</view>
									</view>
								</view>
								<view class="g_isLabel">共有{{ goodsInfo.sku_lst.length }}种规格分类可选</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 其他 -->
		<!-- <view class="g_it">
			<view class="g_iGroup">
				<view class="g_iItem">
					<view class="g_iLabel">优惠</view>
					<view class="g_iCont" @click="receive">
						<view class="g_iIcon"><image src="/static/common/icon_more.png"></image></view>
						<view class="g_iTxt">优惠券</view>
					</view>
				</view>
				<view class="g_iItem">
					<view class="g_iLabel">活动</view>
					<view class="g_iCont">
						<view class="g_iIcon"><image src="/static/common/icon_more.png"></image></view>
						<view class="g_iTxt">家居节</view>
					</view>
				</view>
			</view>
		</view> -->

		<!-- 商品详情 -->
		<view class="g_detail">
			<!-- <view class="g_dTitle">商品详情</view> -->
			<view class="DividerLine"><u-divider color="#999999" bg-color="#f1f1f1" border-color="#ccc" fontSize="28">商品详情</u-divider></view>
			<view style="padding: 20rpx 0;">
				<!-- <rich-text :nodes="goodsInfo.detail | formatRichText"></rich-text> -->
				<u-parse :html="goodsInfo.detail"></u-parse>
			</view>
		</view>

		<!-- 商品图片列表 -->
		<!-- <view class="g_productshow">
			<view class="g_pItem">
				<image mode="widthFix"></image>
			</view>
		</view> -->

		<!-- 底部操作栏 -->
		<!-- <view class="g_btm">
			<view class="g_bShim"></view>
			<view class="g_bCan">
				<view class="g_bRight">
					<view class="g_brAdd" @click="addCart(1)" style="width: 420rpx;border-radius: 10rpx">加入清单</view>
				</view>
				<view class="g_bLeft">
					<view class="g_blItem" @tap="toPage('store')">
						<view class="g_blIcon"><view class="iconfont icon-shop"></view></view>
						<view class="g_blTxt">店铺</view>
					</view>
					<view class="g_blItem">
						<view class="g_blIcon"><view class="iconfont icon-comment2"></view></view>
						<view class="g_blTxt">客服</view>
					</view>
					<view class="g_blItem" @tap="cartlist()">
						<view class="g_blIcon"><view class="iconfont icon-shopping"></view></view>
						<view class="g_blTxt">清单</view>
					</view>
					
				</view>
			</view>
		</view> -->
		<view class="BottomBar">
			<view class="BottomBarView"><view class="BottomBarBtn" @click="EditGoodsPrice">分销改价</view></view>
		</view>

		<!--模态弹窗-->
		<view class="cu-modal bottom-modal" :class="[is_show_model ? 'show' : '']" @click.stop="is_show_model = false">
			<view class="cu-dialog bottom-md" style="border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;" @click.stop="">
				<view class="md-content">
					<view class="md-content-item" @click="toUserMini">
						<image open-type="share" src="../../../static/zhangyu-qrcode-poster/wechat.png"></image>
						<view>分享给用户</view>
						<button @click="is_show_model = false" class="sharebtn"></button>
					</view>
					<view class="md-content-item" @click="sharePoster">
						<image src="../../../static/zhangyu-qrcode-poster/haibao.png"></image>
						<view>生成海报</view>
					</view>
				</view>
				<view class="cancel" @click="is_show_model = false">取消</view>
			</view>
		</view>
		<qrcode-poster
			ref="poster"
			:title="shaegood.product_title"
			:subTitle="shaegood.store_name"
			:headerImg="shaegood.main_imgurl"
			:price="parseFloat(shaegood.price)"
		></qrcode-poster>
		<!-- 弹窗-分享 -->
		<!-- <view class="g_share" v-if="canvasShow">
			
		</view> -->

		<!-- 弹窗-规格 -->
		<view class="Size" v-if="sizePop" @touchmove.stop.prevent>
			<view class="S_bg"></view>
			<view class="S_box">
				<view class="S_bCloak" @tap="hideSizePop"></view>
				<view class="S_bContain">
					<view class="S_bClose" @tap="hideSizePop">
						<view class="S_bcIcon"><text class="iconfont icon-cancel"></text></view>
					</view>
					<view class="S_bInfo">
						<view class="S_biHead"><image :src="goodsInfo.main_imgurl" mode="aspectFit"></image></view>
						<view class="S_biCan">
							<!-- <view class="S_biFee">¥<text>{{goodsInfo.productPrice}}</text></view>
							<view class="S_biTip">
								<view class="yprice" v-if="goodsInfo.rate_price">
									<i>底价</i>￥<text>{{goodsInfo.rate_price}}</text>
								</view>
							</view> -->
							<view>
								<view class="Priceview">
									<view class="GoodsPrice">
										<view class="GoodsPriceText">底价</view>
										<view>
											￥
											<text class="GoodsPriceMun">{{ goodsInfo.rate_price }}</text>
										</view>
									</view>
									<view class="SalePrice" v-if="goodsInfo.isModifyPrice">
										<viwe class="SaleText">销售价</viwe>
										<view class="SaleMun">
											￥
											<text class="SaleMunText">{{ goodsInfo.price }}</text>
										</view>
									</view>
								</view>
								<view class="GoodsShopPrice">市场价￥ {{ goodsInfo.primary_price }}</view>
							</view>
							<!-- <view class="S_biRemark">编号：1000320203</view> -->
						</view>
					</view>
					<scroll-view class="S_bConfig" scroll-y>
						<view class="S_bcCan">
							<view class="S_bcGroup" v-for="(items, index1) in goodsInfo.sizeParams" :key="index1">
								<view class="S_bcTit">{{ items.specifs }}</view>
								<view class="S_bcChecks">
									<view
										class="S_bcCheck"
										v-for="(item, index2) in items.child"
										@click="checkedEvent(item, index1)"
										:key="index2"
										:class="{ checked: item.checked }"
									>
										{{ item.specif }}
									</view>
								</view>
							</view>
							<!-- <view class="S_bcGroup">
								<view class="S_bcTit">数量</view>
								<view class="S_bcNums">
									<view class="S_bcMinus" @tap="minusSizeCart"></view>
									<view class="S_bcNum">{{sizeNum}}</view>
									<view class="S_bcAdd" @tap="addSizeCart"></view>
								</view>
							</view> -->
						</view>
					</scroll-view>
					<view class="S_bBtns"><view class="S_bbBtn1" @click="EditGoodsPrice" style="width: 100%;">分销改价</view></view>
				</view>
			</view>
		</view>
		<u-popup
			v-model="ChangePriceShow"
			mode="bottom"
			border-radius="14"
			height="60%"
			:safe-area-inset-bottom="true"
			:custom-style="{ margin: '0 30rpx 30rpx 30rpx', 'border-radius': '14rpx' }"
			:closeable="true"
		>
			<view class="ChangePopup">
				<view class="ChangePopupTitle">优惠</view>
				<view class="ChangePopupList" style="display: flex;align-items: center;justify-content: space-between;">
					<view class="ChangePopupItem">
						<view style="width: 40rpx;height: 6rpx;background: #F4EBDC;border-radius: 3rpx;margin-bottom: 20rpx;"></view>
						<view class="ChangePopupMes">原价</view>
						<view class="ChangePopupPrice">
							¥
							<text class="ChangePopuptext">{{ goodsInfo.primary_price }}</text>
						</view>
					</view>
					<view class="ChangePopupItem" style="border:3rpx solid #AE8C6C;">
						<view style="width: 40rpx;height: 6rpx;background: #F4EBDC;border-radius: 3rpx;margin-bottom: 20rpx;"></view>
						<view class="ChangePopupMes">底价</view>
						<view class="ChangePopupPrice">
							¥
							<text class="ChangePopuptext">{{ goodsInfo.rate_price }}</text>
						</view>
					</view>
				</view>
				<view class="ChangePopupInput">
					<view class="ChangePopupInputTit">销售金额</view>
					<view class="ChangePopupInputView"><input :value="ChangePrice" @input="bindKeyInput" type="number" placeholder="请输入的销售金额" /></view>
				</view>
				<view class="ChangePopupBtn" @click="EnterChanegePrice">分销改价</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import URL from '@/config/url.js';
import service_mall from '@/service/mall.js';
import service_distribution from '@/service/distribution.js';
import QrcodePoster from '@/components/zhangyu-qrcode-poster/zhangyu-qrcode-poster.vue';

export default {
	components: {
		QrcodePoster
	},
	data() {
		return {
			ImageUrl: URL.IMAGE,
			goodsId: null,
			goodsInfo: null,
			bannerIndex: 0,
			// 规格
			sizePop: false,
			sizeImage: null, // 规格图片
			sizePrice: null, // 规格价格
			sizeNum: 1,
			// 清单
			cart: null,
			child: '',
			is_show_model: false, //是否显示分享模态窗
			shaegood: '',
			specif: '',
			html: '',
			sku_id: '',
			keys: [],
			sharecode: '',
			ChangePriceShow: false,
			ChangePrice: '',
			rate_price: ''
		};
	},

	onLoad(options) {
		// testcode
		this.goodsId = options.product_id;
		// console.log(this.goodsId)
		this.cart = this.$store.state.cart.cart;
		this.getData();
		this.shareimg();
	},
	onShareAppMessage(res) {
		let user_id = this.$store.state.index.userId;
		if (res.from === 'button') {
		}
		return {
			title: '转发',
			path: '/pages/mall/goods/goods?id=' + this.goodsId + '&gid=' + user_id,
			success: function(res) {
				console.log('成功', res);
			}
		};
	},

	methods: {
		EnterChanegePrice() {
			var that = this;
			var ratePrice = that.goodsInfo.rate_price * 1;
			console.log(ratePrice, '----');
			if (that.ChangePrice != '') {
				if (that.ChangePrice * 1 >= ratePrice) {
					that.EditChangePrice();
				} else {
					that.$utils.showErr({
						title: '销售金额不能小于底价'
					});
				}
				//
			} else {
				that.$utils.showErr({
					title: '请输入修改优惠金额'
				});
			}
		},
		EditChangePrice() {
			var that = this;
			let params = {
				product_id: that.goodsId,
				product_skuid: that.sku_id,
				agent_price: that.ChangePrice * 1
			};
			uni.showLoading({
				title: '正在改价...'
			});
			service_distribution.EditChangePrice(params).then(res => {
				if (res.code == 1) {
					// that.Bannerlist = res.data
					uni.showToast({
						title: '改价成功',
						icon: 'success',
						duration: 1000
					});
					setTimeout(() => {
						uni.hideLoading();
						that.ChangePriceShow = false;
						that.ChangePrice = '';
						that.sizePop = false;
						that.is_show_model = true;
					}, 1000);
					that.getData();
					that.shareimg();
				} else {
					that.$utils.showErr({
						title: res.msg
					});
				}
			});
		},

		//限制只能是数字的正则
		validateNumber(val) {
			return val.replace(/\D/g, '');
			// return val.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1');
			//
			// val = val.replace(/^(\-)*(\d+)\.(\d{6}).*$/, '$1$2.$3')
			// val = val.replace(/[\u4e00-\u9fa5]+/g, ""); //清除汉字
			// val = val.replace(/[^\d.]/g, ""); //清楚非数字和小数点
			// val = val.replace(/^\./g, ""); //验证第一个字符是数字而不是
			// val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$","."); //只保留第一个小数点, 清除多余的
			// return val
		},
		//限制只能是数字  //自定义输入金额
		bindKeyInput(e) {
			// console.log(e);
			var that = this;
			let value = that.validateNumber(e.detail.value);
			that.ChangePrice = value;
			return value;
		},
		// 分销改价按钮,点击的时候判断是否选择了规格
		EditGoodsPrice() {
			var that = this;
			var SKU = that.getSKUID(); //获取规格id
			var SkuList = that.goodsInfo.sku_lst;
			if (SKU == 'true') {
				if (that.goodsInfo.isMoreSize) {
					SkuList.forEach((item, index) => {
						if (that.sku_id == item.sku_id) {
							console.log(item);
							that.goodsInfo.price = item.price;
							that.goodsInfo.primary_price = item.primary_price;
							that.goodsInfo.rate_price = item.rate_price;
						}
					});
				}
				that.ChangePriceShow = true;
			} else {
			}
		},
		getSKUID() {
			let stockNum = 0;
			if (!this.goodsInfo.isMoreSize && this.goodsInfo.sku_lst.length > 0) {
				//单
				this.sku_id = this.goodsInfo.sku_lst[0].sku_id;
				return 'true';
			}

			if (this.goodsInfo.isMoreSize && !this.sku_id) {
				this.sizePop = true;
				// if (e != 1) {
				uni.showToast({
					title: '请选择规格',
					icon: 'none',
					duration: 2000
				});
				// }
				return 'false';
			}
			if (this.goodsInfo.isMoreSize) {
				let result = this.goodsInfo.sku_lst.find(r => r.sku_id == this.sku_id);
				if (result) {
					stockNum = result.num;
				}
				return 'true';
			} else {
				stockNum = this.goodsInfo.stockNum;
				return 'false';
			}
			// 先判断库存是否足够
			if (stockNum < this.sizeNum) {
				uni.showToast({
					title: '库存不足',
					icon: 'none'
				});
				return 'false';
			}
		},
		//分享海报
		sharePoster() {
			//获取带参数二维码并传递
			this.is_show_model = false;
			// 'https://mls-dev-1300463815.cos.ap-guangzhou.myqcloud.com/liankun/static/IMG1665.jpeg'
			this.$refs.poster.showCanvas(this.sharecode);
		},

		shareimg() {
			let gid = this.$store.state.index.userId;
			service_distribution
				.GoodsShare({
					product_id: this.goodsId,
					sku_id: this.sku_id
				})
				.then(res => {
					// console.log(res, 'imgimg')
					if (res.code == 1) {
						var specsType = res.data.specs_type == 1 ? false : true;
						// console.log(specsType);
						var SkuList = res.data.sku_lst;
						// goodsInfo.parameter
						// 多规格
						if (specsType) {
							SkuList.forEach((item, index) => {
								if (this.sku_id == item.sku_id) {
									// console.log(item);
									res.data.price = item.price;
								}
							});
							this.shaegood = res.data;
							this.sharecode = res.data.wx_code_url;
						} else {
							// 但规格
							// console.log(SkuList);
							res.data.price = res.data.sku_lst[0].price;
							this.shaegood = res.data;
							this.sharecode = res.data.wx_code_url;
						}
						console.log(this.sharecode);
					}
				});
		},
		ShareUserApp() {
			if (this.sku_id) {
				this.is_show_model = true;
				this.shareimg();
			} else {
				this.sizePop = true;
			}
		},
		// 小程序跳转
		toUserMini() {
			let user_id = this.$store.state.index.userId;
			// console.log(this.goodsId, user_id, '管理端准备传的goodsId和user_id')
			uni.navigateToMiniProgram({
				appId: 'wx66230223cee807f1', // 其他小程序APPID
				envVersion: 'trial',
				path: `/pages_mall/pages/mall/goods_details/GoodsShareDetails`, //其他小程序地址
				extraData: {
					product_id: this.goodsId,
					gid: user_id,
					sku_id: this.sku_id
				},
				success: res => {
					// 打开成功
					console.log('打开成功', res);
				},
				fail: err => {
					console.log('打开失败');
				}
			});
		},
		// 获取商品数据
		getData() {
			service_distribution
				.GoodsDetaile({
					product_id: this.goodsId
				})
				.then(res => {
					console.log(res);
					if (res.code == 1) {
						let data = res.data;
						// 处理数据
						let goodsInfo = {
							// 商品所属店铺信息
							storeId: data.store_id, // 所属店铺id
							storeName: data.store_name, // 所属店铺名称
							storeLogo: data.store_logo, // 所属店铺logo
							// 商品信息
							// 商品价格，只作产品列表产品详情页展示，
							// 实际使用价格：单规格直接取规格数据，多规格根据所选规格变动
							productPrice: data.price, // 商品价格
							parameter: data.parameter,
							primary_price: data.primary_price, // 商品原价
							goodsId: data.product_id, // 商品id
							name: data.product_title, // 商品名
							detail: data.details, // 商品详情
							volume: data.volume, // 商品销量
							roundImgs: data.round_imgs, // 商品图片列表
							// 商品规格信息
							isMoreSize: data.specs_type, // 是否是多规格商品  1: 单规格（不是） 2：多规格（是）
							sku_lst: data.sku_lst,
							main_imgurl: data.main_imgurl,
							sizeParams: data.parameter,
							rate_price: data.rate_price, //根据权限显示底价
							shicahngjia: data.primary_price,

							sizeId: null, // 商品规格id
							price: null, // 商品价格
							costPrice: null, // 商品原价
							stockNum: null, // 商品库存
							isModifyPrice: data.isModifyPrice, //是否改价
							price_range: data.price_range
						};
						this.rate_price = data.rate_price;
						goodsInfo.volume = goodsInfo.volume ? goodsInfo.volume : 0;
						goodsInfo.isMoreSize = goodsInfo.isMoreSize == 1 ? false : true;
						// goodsInfo.sizeParams

						// primary_price 原价    rate_price	底价   price销售价
						// 多规格
						if (goodsInfo.isMoreSize) {
							// goodsInfo.sku_lst.splice(0,1)
							goodsInfo.sku_lst.forEach((item, index) => {
								if (item.attribute == null || item.attribute.length == 0) {
									// console.log(index);
									goodsInfo.sku_lst.splice(index, 1);
								}
							});
							goodsInfo.price = goodsInfo.sku_lst[0].price;
							goodsInfo.primary_price = goodsInfo.sku_lst[0].primary_price;
							goodsInfo.rate_price = goodsInfo.sku_lst[0].rate_price;
							goodsInfo.stockNum = goodsInfo.sku_lst[0].num;
							goodsInfo.sizeId = goodsInfo.sku_lst[0].sku_id;
						}
						// 单规格
						else {
							goodsInfo.price = goodsInfo.sku_lst[0].price;
							goodsInfo.primary_price = goodsInfo.sku_lst[0].primary_price;
							goodsInfo.rate_price = goodsInfo.sku_lst[0].rate_price;
							goodsInfo.stockNum = goodsInfo.sku_lst[0].num;
							goodsInfo.sizeId = goodsInfo.sku_lst[0].sku_id;
							this.sku_id = goodsInfo.sku_lst[0].sku_id;
						}

						this.goodsInfo = goodsInfo;
						this.child = goodsInfo.parameter[0].child;
						this.goodsInfo.detail = this.goodsInfo.detail.replace(/<img/gi, '<img style="max-width:100%;height:auto" ');
					}
				})
				.catch(err => {});
		},

		//选择规格
		checkedEvent(data, index1) {
			if (data.checked) {
				this.$set(data, 'checked', false);
				this.sku_id = '';
			} else {
				this.goodsInfo.sizeParams[index1].child.map(item => {
					this.$set(item, 'checked', false);
				});
				this.$set(data, 'checked', true);
				this.get_keys();
			}
		},
		get_keys() {
			let keys = [];
			this.goodsInfo.sizeParams.map((item1, index1) => {
				let checkedItem = item1.child.find(r => r.checked);
				if (checkedItem) {
					keys.push({
						key: item1.specifs,
						value: checkedItem.specif
					});
				}
			});
			this.keys = keys;
			let sku_lst = [];
			if (this.goodsInfo && this.goodsInfo.sku_lst) {
				sku_lst = this.goodsInfo.sku_lst;
			}
			for (let i = 0; i < sku_lst.length; i++) {
				if (JSON.stringify(sku_lst[i].attribute) == JSON.stringify(keys)) {
					console.log(sku_lst[i]);
					this.sku_id = sku_lst[i].sku_id;
					this.goodsInfo.productPrice = sku_lst[i].price;
					this.goodsInfo.price = sku_lst[i].price;
					this.goodsInfo.rate_price = sku_lst[i].rate_price;
					this.goodsInfo.stockNum = sku_lst[i].num;
					this.goodsInfo.primary_price = sku_lst[i].primary_price; // 商品原价ß
				}
				// console.log(JSON.stringify(sku_lst[i].attribute))
				// console.log(JSON.stringify(keys),123)
			}
		},
		// 添加清单
		// addCart(e) {
		// 	// console.log(this.goodsInfo.stockNum)
		// 	let token = this.$store.state.index.token;
		// 	if(!token){
		// 		uni.navigateTo({
		// 			url: '/pages_login/pages/login/login/index',
		// 		});
		// 	}
		// 	let stockNum = 0;
		// 	if(!this.goodsInfo.isMoreSize && this.goodsInfo.sku_lst.length>0){//单
		// 		this.sku_id = this.goodsInfo.sku_lst[0].sku_id;
		// 	}

		// 	if(this.goodsInfo.isMoreSize && !this.sku_id){
		// 		this.sizePop = true
		// 		if(e != 1){
		// 			uni.showToast({
		// 			    title: '请选择规格',
		// 				icon: 'none',
		// 			    duration: 2000
		// 			});
		// 		}
		// 		return
		// 	}
		// 	if(this.goodsInfo.isMoreSize){
		// 		let result = this.goodsInfo.sku_lst.find(r=>r.sku_id==this.sku_id);
		// 		if(result){
		// 			stockNum = result.num;
		// 		}
		// 	}else{
		// 		stockNum = this.goodsInfo.stockNum;
		// 	}
		// 	// 先判断库存是否足够
		// 	if (stockNum < this.sizeNum) {
		// 		uni.showToast({ title: '库存不足', icon: 'none' })
		// 		return
		// 	}
		// 	service_mall.goods_getadd({product_id:this.goodsId,sku_id:this.sku_id,num:this.sizeNum})
		// 		.then(res => {
		// 			if (res.code == 1) {
		// 			  uni.showToast({ title: "添加清单成功", icon: "success" })
		// 			  this.sizePop = false
		// 			}
		// 	})
		// },

		// 添加数量
		// addSizeCart() {
		// 	this.sizeNum++
		// },

		// 删减清单-规格弹窗
		// minusSizeCart() {
		// 	if (this.sizeNum > 1) this.sizeNum--
		// },

		// 弹窗-规格
		showSizePop() {
			this.sizePop = true;
		},

		hideSizePop() {
			this.sizePop = false;
		},
		// cartlist() {
		// 	let token = this.$store.state.index.token;
		// 	if (!token) {
		// 		uni.navigateTo({
		// 			url: '/pages_login/pages/login/login/index',
		// 		});
		// 	} else {
		// 		let router = this.$store.state.index.page ? this.$store.state.index.page.ability : []
		// 		console.log(router, '、、、、、')
		// 		if (router.findIndex(item => item.route == 'guideIndex') != -1) {
		// 			uni.navigateTo({
		// 				url: "/pagesGuide/shopGuide/guideList/generList"
		// 			})
		// 		} else {
		// 			uni.showToast({
		// 				title: '没有权限',
		// 				icon: 'none'
		// 			})
		// 		}
		// 	}
		// },
		// 跳转页面
		// toPage(page, {
		// 	storeId
		// } = {}) {
		// 	if (page === 'cart') uni.navigateTo({
		// 		url: "/pagesGuide/shopGuide/guideList/generList"
		// 	})
		// 	else if (page === 'store') uni.navigateTo({
		// 		url: "/pages/mall/store/store?storeId=" + this.goodsInfo.storeId
		// 	})
		// },

		// 轮播图内容变动
		changeBanner(e) {
			this.bannerIndex = e.detail.current;
		},

		// 禁止滑动
		moveHandle() {}
	}
};
</script>

<style lang="scss">
page {
	background: #f1f1f1;
}

.Priceview {
	// display: flex;
	// align-items: center;
	// margin-bottom: 18rpx;
	margin-top: 20rpx;

	.GoodsPrice {
		font-size: 24rpx;
		font-weight: bold;
		color: #f66036;
		display: flex;
		align-items: flex-end;
		margin-bottom: 12rpx;

		.GoodsPriceText {
			margin-right: 10rpx;
		}

		.GoodsPriceMun {
			font-size: 44rpx;
			font-weight: 800;
			color: #f66036;
		}
	}

	.SalePrice {
		display: flex;
		align-items: center;
		padding: 10rpx 21rpx;
		border-radius: 4px;
		background: #c3ab7c;
		width: max-content;
		// margin-left: 10rpx;
		margin-bottom: 12rpx;

		.SaleText {
			font-size: 22rpx;
			font-weight: 500;
			color: #fff;
			margin-right: 10rpx;
		}

		.SaleMun {
			font-size: 24rpx;
			font-weight: 500;
			color: #fff;

			.SaleMunText {
				font-size: 36rpx;
				font-weight: 800;
				color: #fff;
				margin-left: 4rpx;
			}
		}
	}
}

.goods {
	// 商品轮播图
	.g_banner {
		height: 556rpx;
		background: #fff;
		position: relative;

		.SwiperDots {
			display: flex;
			align-items: center;
			position: absolute;
			bottom: 16rpx;
			right: 32rpx;
			border-radius: 30rpx;
			background: rgba(0, 0, 0, 0.5);
			padding: 12rpx 24rpx;
			font-size: 22rpx;
			font-weight: 500;
			color: #fefefe;
			text-align: center;
		}
	}

	// 商品基础信息
	.g_base {
		background: #fff;
		overflow: hidden;

		.g_bSell {
			height: 40rpx;
			line-height: 40rpx;
			color: #939393;
			margin: 38rpx 36rpx 0 0;
			float: right;
		}

		.g_bPrice {
			height: 66rpx;
			line-height: 66rpx;
			color: #ef5854;
			font-size: 32rpx;
			font-weight: bold;
			padding: 24rpx 0 0 32rpx;
			// box-sizing: content-box;

			& > text {
				font-size: 48rpx;
			}
		}

		.g_bShare {
			width: 124rpx;
			padding: 12rpx 0 16rpx;
			display: flex;
			flex-flow: column;
			justify-content: center;
			align-items: center;
			float: right;

			.g_bsIcon {
				width: 32rpx;
				height: 32rpx;
				line-height: 32rpx;
				text-align: center;
				font-size: 32rpx;
			}

			.g_bsTxt {
				height: 34rpx;
				line-height: 34rpx;
				text-align: center;
				font-size: 24rpx;
				margin-top: 6rpx;
			}
		}

		.g_bName {
			min-height: 88rpx;
			line-height: 44rpx;
			font-size: 32rpx;
			font-weight: bold;
			margin: 16rpx 16rpx 16rpx 34rpx;
			box-sizing: content-box;
			display: flex;
			align-items: center;
		}
	}

	// 其他
	.g_it {
		.g_iGroup {
			margin-top: 16rpx;
			background: #fff;
		}

		.g_iItem {
			min-height: 90rpx;

			&:last-child .g_iCont::after {
				content: none;
			}
		}

		.g_iLabel {
			min-width: 126rpx;
			height: 90rpx;
			line-height: 90rpx;
			// padding: 0 12rpx 0 32rpx;
			color: #999999;
			float: left;
		}

		.g_iCont {
			position: relative;
			overflow: hidden;

			&::after {
				content: '';
				width: 100%;
				height: 1px;
				background: #f4f4f4;
				position: absolute;
				bottom: 0;
				left: 0;
				transform: scaleY(0.5);
			}
		}

		.g_iIcon {
			width: 32rpx;
			height: 32rpx;
			position: absolute;
			top: 28rpx;
			right: 36rpx;
		}

		.g_iTxt {
			height: 90rpx;
			line-height: 90rpx;
			color: #333333;
		}

		.g_iSelect {
			padding-bottom: 24rpx;
			display: flex;

			.g_isItem {
				width: 60rpx;
				height: 60rpx;
				margin-right: 16rpx;
				border-radius: 8rpx;
				background: #f6f7fb;
				overflow: hidden;
			}

			.g_isItem.active {
				border: 1px #dd524d solid;
			}

			.g_isLabel {
				width: 284rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				color: #939393;
				font-size: 22rpx;
				border-radius: 8rpx;
				background: #f6f7fb;
			}
		}
	}

	// 商品详情
	.g_detail {
		padding: 0 36rpx 142rpx 32rpx;
		margin-top: 16rpx;
		// background: #fff;

		.g_dTitle {
			height: 44rpx;
			line-height: 44rpx;
			color: #000;
			font-size: 32rpx;
		}

		.g_dBox {
			margin-top: 24rpx;
			border: 1px solid rgba(0, 0, 0, 0.08);
		}

		.g_dItem {
			height: 84rpx;
			border-bottom: 1px solid rgba(0, 0, 0, 0.08);
			display: flex;

			&:last-child {
				border: none;
			}
		}

		.g_dGroup {
			width: 50%;
			display: flex;
			align-items: center;
		}

		.g_dLabel {
			min-width: 146rpx;
			height: 84rpx;
			line-height: 84rpx;
			color: #000;
			font-size: 24rpx;
			padding: 0 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.g_dVal {
			max-height: 68rpx;
			line-height: 34rpx;
			color: #787878;
			font-size: 24rpx;
		}
	}

	// 底部操作栏
	.g_btm {
		.g_bShim {
			height: 100rpx;
			box-sizing: content-box;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
		}

		.g_bCan {
			width: 100vw;
			height: 100rpx;
			background: #fff;
			position: fixed;
			bottom: 0;
			left: 0;
			box-sizing: content-box;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
		}

		.g_bRight {
			height: 100%;
			padding-right: 22rpx;
			float: right;
			display: flex;
			align-items: center;
		}

		.g_brAdd,
		.g_brBuy {
			width: 226rpx;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			color: #fff;
			font-weight: bold;
			border-radius: 10rpx 0 0 10rpx;
			background: #c3ab7c;
		}

		.g_brBuy {
			width: 204rpx;
			border-radius: 0 10rpx 10rpx 0;
			background: #333;
			background: #ccc;
		}

		.g_bLeft {
			height: 100%;
			overflow: hidden;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.g_blItem {
			width: 88rpx;
		}

		.g_blIcon {
			width: 40rpx;
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
			font-size: 40rpx;
			margin: 0 auto;
		}

		.g_blTxt {
			height: 32rpx;
			line-height: 32rpx;
			text-align: center;
			font-size: 22rpx;
		}
	}

	// 弹窗-分享
	.g_share {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1001;

		.g_sBg {
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.6);
		}

		.g_sBox {
			width: 100%;
			height: 338rpx;
			border-radius: 16rpx 16rpx 0 0;
			background: #fff;
			position: absolute;
			bottom: 0;
			left: 0;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
		}

		.g_sPoster {
			position: absolute;
			bottom: 420rpx;
			left: 56rpx;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
		}

		.g_spCan {
			width: 640rpx;
			height: 888rpx;
			border-radius: 16rpx;
			background: #fff;
			box-shadow: 0 0 12rpx 0 rgba(0, 0, 0, 0.16);
		}
	}
}

// 弹窗-规格
.Size {
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1001;

	.S_bg {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.8);
	}

	.S_box {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		flex-flow: column;
	}

	.S_bCloak {
		height: 176rpx;
	}

	.S_bContain {
		border-radius: 24rpx 24rpx 0 0;
		background: #fff;
		position: relative;
		overflow: hidden;
		display: flex;
		flex-flow: column;
		flex: 1;
	}

	.S_bClose {
		width: 104rpx;
		height: 120rpx;
		position: absolute;
		top: 0;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;

		.S_bcIcon {
			width: 40rpx;
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
			color: #000;
			font-size: 20rpx;
			border-radius: 50%;
			background: #f9f6f3;
		}
	}

	.S_bInfo {
		padding: 36rpx 32rpx 20rpx;
		display: flex;
		align-items: flex-start;

		.S_biHead {
			width: 178rpx;
			height: 178rpx;
			margin-right: 24rpx;
			border-radius: 10rpx;
			background: #f0f0f0;
			box-shadow: 0 4rpx 4rpx 0 rgba(136, 136, 136, 0.16);
			overflow: hidden;
			// float: left;
		}

		.S_biCan {
			overflow: hidden;
		}

		.S_biFee {
			height: 60rpx;
			line-height: 60rpx;
			color: #e9423e;
			font-size: 32rpx;
			font-weight: bold;
			margin-top: 32rpx;

			& > text {
				font-size: 44rpx;
			}
		}

		.S_biTip {
			height: 40rpx;
			line-height: 40rpx;
			color: #e9423e;
			font-size: 20rpx;
			margin-top: 10rpx;
			border-radius: 4rpx;
			background: #feeff2;
			display: inline-block;

			.yprice {
				margin-left: 0;
			}
		}

		.S_biRemark {
			height: 28rpx;
			line-height: 28rpx;
			color: #939393;
			font-size: 20rpx;
			margin-top: 10rpx;
		}
	}

	.S_bConfig {
		overflow: hidden;
		flex: 1;

		.S_bcCan {
			padding: 0 34rpx 146rpx;
		}

		.S_bcGroup {
			padding-top: 40rpx;
			position: relative;

			&:first-child {
				padding-top: 20rpx;
			}
		}

		.S_bcTit {
			height: 40rpx;
			line-height: 40rpx;
			font-weight: bold;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.S_bcChecks {
			padding-top: 8rpx;
		}

		.S_bcCheck {
			height: 42rpx;
			line-height: 42rpx;
			color: #939393;
			font-size: 24rpx;
			padding: 0 26rpx;
			margin: 16rpx 16rpx 0 0;
			border-radius: 22rpx;
			background: #f5f5f5;
			display: inline-block;

			&.checked {
				color: #e9423e;
				background: #feeff2;
			}
		}

		.S_bcNums {
			height: 48rpx;
			position: absolute;
			top: 36rpx;
			right: -22rpx;
			display: flex;
		}

		.S_bcNum {
			width: 72rpx;
			height: 48rpx;
			line-height: 48rpx;
			text-align: center;
			border-radius: 8rpx;
			background: #f6f7fb;
		}

		.S_bcMinus,
		.S_bcAdd {
			width: 72rpx;
			height: 48rpx;
			position: relative;
		}

		.S_bcMinus::before,
		.S_bcAdd::before,
		.S_bcAdd::after {
			content: '';
			width: 24rpx;
			height: 4rpx;
			border-radius: 4rpx;
			background: #333;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.S_bcAdd::after {
			width: 4rpx;
			height: 24rpx;
		}
	}

	.S_bBtns {
		height: 86rpx;
		color: #fff;
		font-weight: bold;
		padding: 20rpx 48rpx 0;
		border-top: 1px solid #f8f6f3;
		background: #fff;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		box-sizing: content-box;
		display: flex;
		justify-content: space-between;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.S_bbBtn1,
		.S_bbBtn2 {
			width: 294rpx;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			border-radius: 8rpx;
			background: #c3ab7c;

			&:active {
				opacity: 0.88;
			}
		}

		.S_bbBtn2 {
			background: #333;
		}
	}
}

.yprice {
	margin-left: 30rpx;
	border: 1px #e9423e solid;
	display: inline-block;
	font-size: 18rpx;
	line-height: 32rpx;
	padding-right: 10rpx;

	i {
		display: inline-block;
		background: #e9423e;
		color: #fff;
		font-weight: normal;
		font-size: 20rpx;
		line-height: 36rpx;
		padding: 0 10rpx;
		margin-right: 5rpx;
	}

	text {
		font-size: 28rpx;
	}
}

.ledtprei {
	// float: left;

	text {
		font-size: 40rpx;
	}
}

.cu-modal {
	position: fixed;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	top: 0;
	display: none;
	width: 100%;
}

.show {
	display: block;
}

.bottom-md {
	position: absolute;
	bottom: 0;
	left: 0;
	background: #fff;
}

.share {
	position: fixed;
	color: #ffffff;
	right: 0;
	bottom: 190rpx;
	background: linear-gradient(to bottom right, #fe726b, #fe956b);
	padding: 10rpx 10rpx 10rpx 20rpx;
	border-top-left-radius: 50px;
	border-bottom-left-radius: 50px;
	box-shadow: 0 0 20upx rgba(0, 0, 0, 0.09);
}

.cancel {
	width: 100vw;
	padding: 30rpx;
	text-align: center;
	background: #ffffff;
	color: #888;
	font-weight: normal;
	font-size: 30rpx;
}

.md-content {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 50rpx 0;
}

.md-content-item {
	margin: 0 70rpx;
	position: relative;
}

.md-content-item image {
	width: 100rpx;
	height: 100rpx;
	margin: auto;
}

.md-content-item view {
	margin-top: 15rpx;
	font-size: 28rpx;
}

.sharebtn {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
}

.BottomBar {
	position: fixed;
	bottom: 0;
	background: #fff;
	width: 100%;
	padding: 10rpx 32rpx 12rpx 32rpx;

	.BottomBarView {
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.BottomBarBtn {
		height: 74rpx;
		background: #c3ab7c;
		border-radius: 37rpx;
		text-align: center;
		line-height: 74rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #ffffff;
	}
}

.GoodsMessage {
	background: #fff;
	margin: 32rpx;
	box-shadow: 0rpx 2rpx 14rpx 0rpx #f1f1f1;
	border-radius: 10rpx;
	box-sizing: border-box;
	padding: 40rpx 20rpx 32rpx 20rpx;
	position: relative;

	.GoodsFX {
		font-size: 28rpx;
		font-weight: 500;
		color: #f66036;
		margin-bottom: 18rpx;
	}

	.ShareView {
		position: absolute;
		right: 0;
		top: 25rpx;
		background: #f1f1f1;
		border-radius: 25rpx 0rpx 0rpx 25rpx;
		padding: 10rpx 18rpx;
	}

	.Priceview {
		display: flex;
		align-items: center;
		// margin-bottom: 18rpx;

		.GoodsPrice {
			font-size: 24rpx;
			font-weight: bold;
			color: #f66036;
			display: flex;
			align-items: flex-end;

			.GoodsPriceText {
				margin-right: 10rpx;
			}

			.GoodsPriceMun {
				font-size: 44rpx;
				font-weight: 800;
				color: #f66036;
			}
		}

		.SalePrice {
			display: flex;
			align-items: center;
			padding: 10rpx 21rpx;
			border-radius: 254px;
			background: #c3ab7c;
			width: max-content;
			margin-left: 10rpx;

			.SaleText {
				font-size: 22rpx;
				font-weight: 500;
				color: #ffffff;
				margin-right: 10rpx;
			}

			.SaleMun {
				font-size: 24rpx;
				font-weight: 500;
				color: #ffffff;

				.SaleMunText {
					font-size: 36rpx;
					font-weight: 800;
					color: #ffffff;
					margin-left: 4rpx;
				}
			}
		}
	}

	.GoodsShopPrice {
		font-size: 24rpx;
		font-weight: 500;
		// text-decoration: line-through;
		color: #666666;
		margin-bottom: 39rpx;
	}

	.GoodsTitle {
		font-size: 34rpx;
		font-weight: bold;
		color: #333333;
		text-align: justify;
		// margin-bottom: 50rpx;
	}
}

.DividerLine {
	margin: 50rpx 0 20rpx 0;
}

.ChangePopup {
	padding: 30rpx 40rpx;

	.ChangePopupTitle {
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
		text-align: center;
	}

	.ChangePopupList {
		margin-top: 63rpx;

		.ChangePopupItem {
			width: 280rpx;
			height: 180rpx;
			background: #fbf7f1;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;

			.ChangePopupMes {
				font-size: 26rpx;
				font-weight: 500;
				color: #333333;
				margin-bottom: 6rpx;
			}

			.ChangePopupPrice {
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;

				.ChangePopuptext {
					font-size: 60rpx;
					font-weight: 800;
					margin-left: 10rpx;
				}
			}
		}
	}

	.ChangePopupInput {
		margin-top: 102rpx;
		margin-bottom: 60rpx;

		.ChangePopupInputTit {
			font-size: 26rpx;
			font-weight: bold;
			color: #a5884f;
			margin-bottom: 14rpx;
		}

		.ChangePopupInputView {
			height: 100rpx;
			background: #f1f1f1;
			border-radius: 50rpx;
			padding: 0 40rpx;
			overflow: hidden;

			input {
				height: 100%;
				font-size: 32rpx;
			}
		}
	}

	.ChangePopupBtn {
		background: #c3ab7c;
		border-radius: 50rpx;
		height: 100rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #ffffff;
		text-align: center;
		line-height: 100rpx;
	}
}
</style>
